<template>
  <div class="container" v-loading="status_loading">
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.page.location')+$t('m.code')">
            <el-input maxlength="20" show-word-limit v-model="formInline.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select @change="selectState" v-model="formInline.state" :placeholder="$t('m.choose')">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="increase" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
          <el-button type @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
          <el-button type="primary" @click="editState" v-if="hasPermission('editState')">{{$t('m.editState')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="ellipse"></div>
    <el-row :gutter="20" class="table-wrap">
      <el-col :span="4">
        <el-collapse v-model="activeName" accordion @change="getPartition" style="max-height:623px">
          <el-collapse-item v-for="(item,index) in warehouse" :key="index" :title="item.name" :name="item.id">
            <el-radio-group v-model="radio" v-loading="listLoading">
              <el-radio @change="radioClick" class="block" v-for="(item,i) in partition" :label="item.id" :key="i">{{item.name}}({{item.code}})</el-radio>
            </el-radio-group>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="20" v-loading="contentLoading">
        <el-table ref="table" stripe empty-text fits :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')+$t('m.code')" width="200"></el-table-column>
          <el-table-column :label="$t('m.state')" width="100" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="primary" :loading="true">加载中</el-button> -->
              <span v-if="scope.row.state==0">{{$t('m.stopped')}}</span>
              <span v-if="scope.row.state==1">{{$t('m.started')}}</span>
              <span v-if="scope.row.state==2">{{$t('m.partoccupy')}}</span>
              <span v-if="scope.row.state==4">{{$t('m.alloccupy')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="extent" :label="$t('m.length')" width="120"></el-table-column>
          <el-table-column align="center" prop="width" :label="$t('m.width')" width="120"></el-table-column>
          <el-table-column align="center" prop="height" :label="$t('m.height')" width="120"></el-table-column>
          <el-table-column align="center" prop="maxinventory" :label="$t('m.location.maxinventory')"></el-table-column>
          <el-table-column align="center" prop="partitionname" :label="$t('m.partitionname')"></el-table-column>
          <el-table-column align="center" prop="warehousename" :label="$t('m.warehouse')"></el-table-column>

          <el-table-column :label="$t('m.operation')" width="100" align="center">
            <template slot-scope="scope">
              <el-button v-if="(scope.row.state==1||scope.row.state==2)&&hasPermission('table-edit')" type="primary" @click="open(scope.row)" size="mini">{{$t('m.edit')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
      </el-col>
    </el-row>

    <!-- 库位编辑 dialog 开始 -->
    <el-dialog @close="closeDialog" width="600px" :title="$t('m.edit')+$t('m.page.location')" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :rules="ruleFormEdit" ref="ruleFormEdit" size="mini" :model="form">
        <el-form-item :label="$t('m.page.warehouse')+$t('m.name')" :label-width="formLabelWidth" prop="warehousename" align="left">
          <el-select disabled v-model="form.warehousename" :placeholder="$t('m.choose')">
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.partition')+$t('m.name')" :label-width="formLabelWidth" prop="partitionname" align="left">
          <el-select disabled @change="selectPartition" v-model="form.partitionname" :placeholder="$t('m.choose')">
            <el-option v-for="item in partition" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.partition')+$t('m.code')" :label-width="formLabelWidth" prop="partitioncode">
          <el-input disabled size="mini" v-model="form.partitioncode" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('m.location.floor')" :label-width="formLabelWidth" prop="floor">
          <el-input disabled size="mini" v-model="form.floor" autocomplete="off"></el-input>
        </el-form-item>-->
        <el-form-item :label="$t('m.location.channel')" :label-width="formLabelWidth" prop="channel">
          <el-input disabled size="mini" v-model="form.channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.shelves')" :label-width="formLabelWidth" prop="shelves">
          <el-input disabled size="mini" v-model="form.shelves" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.level')" :label-width="formLabelWidth" prop="level">
          <el-input disabled size="mini" v-model="form.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.grating')" required :label-width="formLabelWidth" prop="grating">
          <el-input disabled size="mini" v-model="form.grating" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.identificationcode')" :label-width="formLabelWidth" prop="identificationcode">
          <el-input class="upper" size="mini" v-model="form.identificationcode" autocomplete="off" onkeyup="this.value = this.value.replace(/[^A-Za-z0-9]/g, '')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.length')" :label-width="formLabelWidth" align="left" prop="extent" :rules="ruleFormEdit.num">
          <el-col :span="22">
            <el-input @input="validateNumber2('extent')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="form.extent" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>

        <el-form-item :label="$t('m.width')" :label-width="formLabelWidth" align="left" prop="width" :rules="ruleFormEdit.num">
          <el-col :span="22">
            <el-input @input="validateNumber2('width')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="form.width" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.height')" :label-width="formLabelWidth" align="left" prop="height" :rules="ruleFormEdit.num">
          <el-col :span="22">
            <el-input @input="validateNumber2('height')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="form.height" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.size')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm³</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.location.maxinventory')" :label-width="formLabelWidth" prop="maxinventory">
          <el-input @input="validateNumber2('maxinventory')" maxlength="5" show-word-limit size="mini" v-model="form.maxinventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.differentsku')" :label-width="formLabelWidth" prop="differentsku">
          <el-input disabled maxlength="5" show-word-limit size="mini" v-model="form.differentsku" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.page.location')+$t('m.staff')" :label-width="formLabelWidth" prop="warehouseareatouserList" align="left">
          <!-- <el-select
            @change="selectUserOne"
            v-model="form.locationtouserList[0].username"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in user" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>-->
          <div v-for="(item,i) in form.warehouseareatouserList" :key="i" :value="item.username">{{item.username}}</div>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="editCancel">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="change()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 库位编辑 dialog 结束 -->

    <!-- 库位新增 dialog 开始 -->
    <el-dialog @close="closeAddDialog" width="600px" :title="$t('m.add')+$t('m.page.location')" :visible.sync="dialogFormVisible1" :close-on-click-modal="false">
      <el-form :rules="ruleFormAdd" ref="ruleFormAdd" size="mini" :model="increaseForm">
        <el-form-item :label="$t('m.page.warehouse')+$t('m.name')" :label-width="formLabelWidth" prop="warehouseid" align="left">
          <el-select disabled v-model="increaseForm.warehouseid" :placeholder="$t('m.choose')">
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.partition')+$t('m.name')" :label-width="formLabelWidth" prop="partitionname" align="left">
          <el-select @change="selectPartition" v-model="increaseForm.partitionname" :placeholder="$t('m.choose')" filterable>
            <el-option v-for="item in partition" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.page.partition')+$t('m.code')" :label-width="formLabelWidth" prop="partitioncode">
          <!-- <el-input disabled size="mini" v-model="increaseForm.partitioncode" autocomplete="off"></el-input> -->
          <div align="left">{{increaseForm.partitioncode}}</div>
        </el-form-item>
        <!-- <el-form-item :label="$t('m.location.floor')" :label-width="formLabelWidth" prop="floor">
          <el-input size="mini" v-model.number="increaseForm.floor" autocomplete="off" maxlength="1" show-word-limit></el-input>
        </el-form-item>-->
        <el-form-item :label="$t('m.location.channel')" :label-width="formLabelWidth" prop="channel">
          <el-input @input="validateNumber('channel')" size="mini" v-model.number="increaseForm.channel" autocomplete="off" maxlength="2" show-word-limit></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.shelves')" :label-width="formLabelWidth" prop="shelves">
          <el-input @input="validateNumber('shelves')" size="mini" v-model.number="increaseForm.shelves" autocomplete="off" maxlength="1" show-word-limit></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.level')" :label-width="formLabelWidth" prop="level">
          <el-input @input="validateNumber('level')" size="mini" v-model.number="increaseForm.level" autocomplete="off" maxlength="2" show-word-limit></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.grating')" required :label-width="formLabelWidth">
          <el-col :span="11">
            <el-form-item prop="mingrating" style="margin-bottom:0">
              <el-input @input="validateNumber('mingrating')" size="mini" v-model.number="increaseForm.mingrating" autocomplete="off" maxlength="2" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">~</el-col>
          <el-col :span="11">
            <el-form-item prop="maxgrating" style="margin-bottom:0">
              <el-input @input="validateNumber('maxgrating')" size="mini" v-model.number="increaseForm.maxgrating" autocomplete="off" maxlength="2" show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('m.location.identificationcode')" :label-width="formLabelWidth" prop="identificationcode">
          <el-input class="upper" size="mini" v-model="increaseForm.identificationcode" autocomplete="off"
           maxlength="4" show-word-limit onkeyup="this.value = this.value.replace(/[^A-Za-z0-9]/g, '')">
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('m.length')" :label-width="formLabelWidth" align="left" prop="extent" :rules="ruleFormAdd.num">
          <el-col :span="22">
            <el-input @input="validateNumber('extent')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="increaseForm.extent" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>

        <el-form-item :label="$t('m.width')" :label-width="formLabelWidth" align="left" prop="width" :rules="ruleFormAdd.num">
          <el-col :span="22">
            <el-input @input="validateNumber('width')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="increaseForm.width" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.height')" :label-width="formLabelWidth" align="left" prop="height" :rules="ruleFormAdd.num">
          <el-col :span="22">
            <el-input @input="validateNumber('height')" maxlength="5" show-word-limit @change="getSize" size="mini" v-model="increaseForm.height" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.size')" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm³</el-col>
        </el-form-item>
        <el-form-item :label="$t('m.location.maxinventory')" :label-width="formLabelWidth" prop="maxinventory">
          <el-input @input="validateNumber('maxinventory')" maxlength="5" show-word-limit size="mini" v-model="increaseForm.maxinventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('m.location.differentsku')" :label-width="formLabelWidth" prop="differentsku">
          <el-input disabled maxlength="5" show-word-limit size="mini" v-model="increaseForm.differentsku" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible1 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handIncrease()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 库位新增 dialog 结束 -->
    <!-- 批量修改状态开始 -->
    <el-dialog width="600px" :title="$t('m.editState')" :visible.sync="dialogFormVisible2">
      <el-select size="mini" @change="setState" v-model="stateValue" :placeholder="$t('m.choose')">
        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible2 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handleState()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改状态结束 -->
    <!-- 跳转开始 -->
    <el-dialog :title="$t('m.noticemessage')" :visible.sync="dialogVisible" width="300px">
      <span>{{$t('m.location.message')}}</span>
      <div class="btns">
        <el-button size="mini" @click="dialogVisible = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="newPath">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 跳转结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
export default {
  name:'temporary',
  data(){
    return {
      dialogVisible:false,
      activeName:'',
      status_loading:true,
      formInline:{
        code:'',
        state:''
      },
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      warehouse:[],
      user:[],
      form:{
        channel:'',
        differentsku:0,
        extent:0,
        grating:'',
        height:0,
        identificationcode:'',
        level:'',
        locationcode:'',
        locationid:0,
        locationtouserList:[
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          },
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          }
        ],
        locationtousernames:[''],
        maxinventory:0,
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        rows:0,
        shelves:'',
        state:0,
        warehouseid:null,
        warehousename:'',
        width:0
      },
      increaseForm:{
        channel:'',
        differentsku:1,
        extent:null,
        height:null,
        identificationcode:'',
        level:'',
        locationcode:'',
        locationid:null,
        locationtouserList:[
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          },
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          }
        ],
        locationtousernames:[''],
        maxgrating:'',
        maxinventory:null,
        mingrating:'',
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        rows:0,
        shelves:'',
        state:0,
        warehouseid:null,
        warehousename:'',
        width:null
      },
      formLabelWidth:'140px',
      // options: [
      //   {
      //     value: "",
      //     label: this.$t("m.all")
      //   },
      //   {
      //     value: "0",
      //     label: this.$t("m.stop")
      //   },
      //   {
      //     value: "1",
      //     label: this.$t("m.start")
      //   },
      //   {
      //     value: "2",
      //     label: this.$t("m.occupy")
      //   }
      // ],
      size:0, //体积,
      type:'', //库位类型
      stateValue:'', //状态
      partition:[],
      allArea:[],
      indexNum:null,
      radio:'',
      partitionid:null,
      listLoading:false,
      contentLoading:false,
      locationid:null
    }
  },
  computed:{
    state(){
      return [
        {
          value:'0',
          label:this.$t('m.stop')
        },
        {
          value:'1',
          label:this.$t('m.start')
        },
        {
          value:'2',
          label:this.$t('m.partoccupy')
        },
        {
          value:'4',
          label:this.$t('m.alloccupy')
        }
      ]
    },
    options(){
      return [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'0',
          label:this.$t('m.stopped')
        },
        {
          value:'1',
          label:this.$t('m.started')
        },
        {
          value:'2',
          label:this.$t('m.partoccupy')
        },
        {
          value:'4',
          label:this.$t('m.alloccupy')
        }
      ]
    },
    ruleFormEdit(){
      let onlyNumber = (rule, value, callback) => {
        if (!/^\+?[1-9]\d*$/.test(value)&&value){
          return callback(new Error(this.$t('m.onlynumber')))
        }
        callback()
      }
      return {
        num:[
          { validator:onlyNumber, trigger:'blur' }
        ],
        maxinventory:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.maxinventory'),
            trigger:'blur'
          },
          { validator:onlyNumber, trigger:'blur' }
        ],
        differentsku:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.differentsku'),
            trigger:'blur'
          },
          { validator:onlyNumber, trigger:'blur' }
        ]
      }
    },
    ruleFormAdd(){
      this.$nextTick(() => {
        this.$refs.ruleFormAdd.clearValidate()
      })
      let onlyNumber = (rule, value, callback) => {
        if (!/^\+?[1-9]\d*$/.test(value)&&value){
          return callback(new Error(this.$t('m.onlynumber')))
        }
        callback()
      }
      let checkNumMax = (rule, value, callback) => {
        let num = Number(value)
        if (!/^\+?[1-9]\d*$/.test(value)){
          return callback(new Error(this.$t('m.onlynumber')))
        }
        if (this.increaseForm.mingrating){
          if (num < this.increaseForm.mingrating){
            callback(new Error(this.$t('m.check.greater')))
          } else {
            callback()
          }
        }
      }
      let checkNumMin = (rule, value, callback) => {
        let num = Number(value)
        if (!/^\+?[1-9]\d*$/.test(value)){
          return callback(new Error(this.$t('m.onlynumber')))
        }
        if (this.increaseForm.maxgrating){
          if (num > this.increaseForm.maxgrating){
            callback(new Error(this.$t('m.check.less')))
          } else {
            callback()
          }
        }

      }
      return {
        num:[
          { validator:onlyNumber, trigger:'blur' }
        ],
        warehouseid:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.warehouse'),
            trigger:'change'
          }
        ],
        partitionname:[
          {
            required:true,
            message:this.$t('m.choose') + this.$t('m.page.partition'),
            trigger:'change'
          }
        ],
        floor:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.floor'),
            trigger:'blur'
          },
          {
            type:'number',
            min:1,
            message:this.$t('m.enter') + this.$t('m.check.number0'),
            trigger:'blur'
          }
        ],
        channel:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.channel'),
            trigger:'blur'
          },
          {
            type:'number',
            min:1,
            message:this.$t('m.enter') + this.$t('m.check.number0'),
            trigger:'blur'
          }
        ],
        shelves:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.shelves'),
            trigger:'blur'
          },
          {
            type:'number',
            min:1,
            message:this.$t('m.enter') + this.$t('m.check.number0'),
            trigger:'blur'
          }
        ],
        level:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.level'),
            trigger:'blur'
          },
          {
            type:'number',
            min:0,
            message:this.$t('m.enter') + this.$t('m.check.number'),
            trigger:'blur'
          }
        ],
        mingrating:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.check.min'),
            trigger:'blur'
          },
          { validator:checkNumMin, trigger:'blur' }
        ],

        maxgrating:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.check.max'),
            trigger:'blur'
          },
          { validator:checkNumMax, trigger:'blur' }
        ],
        maxinventory:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.maxinventory'),
            trigger:'blur'
          },
          { validator:onlyNumber, trigger:'blur' }
        ],
        differentsku:[
          {
            required:true,
            message:this.$t('m.enter') + this.$t('m.location.differentsku'),
            trigger:'blur'
          },
          { validator:onlyNumber, trigger:'blur' }
        ]
      }
    }
  },
  watch:{
    // "$i18n.locale"() {
    //   this.state = [
    //     {
    //       value: "0",
    //       label: this.$t("m.stop")
    //     },
    //     {
    //       value: "1",
    //       label: this.$t("m.start")
    //     },
    //     {
    //       value: "2",
    //       label: this.$t("m.occupy")
    //     }
    //   ];
    //   this.options = [
    //     {
    //       value: "",
    //       label: this.$t("m.all")
    //     },
    //     {
    //       value: "0",
    //       label: this.$t("m.stop")
    //     },
    //     {
    //       value: "1",
    //       label: this.$t("m.start")
    //     },
    //     {
    //       value: "2",
    //       label: this.$t("m.occupy")
    //     }
    //   ];
    // },
  },
  methods:{
    validateNumber(key){
      this.$set(this.increaseForm,key,this.increaseForm[key].replace(/[^\d]/g,''))
    },
    validateNumber2(key){
      this.$set(this.form,key,this.form[key].replace(/[^\d]/g,''))
    },
    newPath(){
      this.dialogVisible = false
      this.$router.push({ name:'regional' })
    },
    search(){
      this.page = 1
      this.init()
    },
    handleClick(row){
      const $table = this.$refs.table

      $table.toggleRowExpansion(row)
      $table.toggleRowSelection(row)
    },
    handleState1(index, row){
      //console.log(index,row);
      this.tableData[index].state = 1
      this.changeStatus1(index, row)
    },
    handleState2(index, row){
      //console.log(index,row);
      this.tableData[index].state = 0
      this.changeStatus2(index, row)
    },
    init(){
      let that = this
      that.contentLoading = true
      let code = this.formInline.code
      let state = this.formInline.state
      that
        .$axios({
          method:'get',
          url:'/locationinfo/page',
          params:{
            page:this.page,
            rows:this.rowSize,
            state:state,
            locationcode:code,
            partitionid:that.partitionid
          }
        })
        .then(({ data }) => {
          for (let i = 0;i < data.records.length;i++){
            data.records[i].createdate = common.timestampToTime(
              data.records[i].createdate
            )
            data.records[i].modifydate = common.timestampToTime(
              data.records[i].modifydate
            )
          }

          that.tableData = data.records
          that.totalRows = data.total
          that.contentLoading = false
        })
    },

    //停用
    changeStatus2(index, row){
      let that = this
      let formdata = new FormData()
      formdata.append('status', 0)
      that
        .$axios({
          method:'put',
          url:`/locationinfo/swt/${row.locationid}/0`,
          data:formdata
        })
        .then(() => {
          that.tableData[index].status = 0
        })
    },

    //启用
    changeStatus1(index, row){
      let formdata = new FormData()
      formdata.append('status', 1)
      this.$axios({
        method:'put',
        url:`/locationinfo/swt/${row.locationid}/1`,
        data:formdata
      }).then(() => {
        this.tableData[index].status = 1
      })
    },
    setState(id){
      this.form.state = id
    },
    open(row){
      this.locationid = row.locationid
      this
        .$axios({
          method:'get',
          url:`/locationinfo/query/${row.locationid}`
        })
        .then(({ data }) => {
          this.form = data
          if (this.form.height && this.form.width && this.form.extent){
            this.size = this.form.height * this.form.width * this.form.extent
          }
          if (this.form.state == '1'){
            this.stateValue = this.$t('m.start')
          }
          if (this.form.state == '0'){
            this.stateValue = this.$t('m.stop')
          }
          if (this.form.state == '2'){
            this.stateValue = this.$t('m.occupy')
          }
          this.dialogFormVisible = true
        })
    },
    change(){
      this.$refs['ruleFormEdit'].validate(valid => {
        if (valid){
          for (let i in this.form){
            if (typeof this.form[i] === 'string'){
              this.form[i] = this.form[i].replace(/\s*/g, '')
            }
          }
          this.form.identificationcode = this.form.identificationcode.toUpperCase()
          this.$axios({
            method:'put',
            url:'/locationinfo/update',
            data:this.form
          }).then(() => {
            this.dialogFormVisible = false
            this.$message({
              showClose:true,
              message:this.$t('m.editSuccess'),
              type:'success',
              duration:1000
            })
            this.init()
          })
        }
      })
    },
    increase(){
      this.dialogFormVisible1 = true
      this.form.height = null
      this.form.width = null
      this.form.length = null
      this.size = 0
    },
    handIncrease(){
      this.$refs['ruleFormAdd'].validate(valid => {
        if (valid){
          for (let i in this.increaseForm){
            if (typeof this.increaseForm[i] === 'string'){
              this.increaseForm[i] = this.increaseForm[i].replace(/\s*/g, '')
            }
          }
          this.increaseForm.identificationcode = this.increaseForm.identificationcode.toUpperCase()
          this.$axios({
            method:'post',
            url:'/locationinfo/insert',
            data:this.increaseForm
          }).then(() => {
            this.dialogVisible = true
            this.dialogFormVisible1 = false
            this.init()
          })
        }
      })
    },
    editCancel(){
      this.dialogFormVisible = false
      this.init()
    },
    selectState(val){
      this.formInline.state = val
    },
    getWarehouse(){
      let that = this
      that.status_loading = true
      that.warehouse=[]
      that
        .$axios({
          method:'get',
          url:'/warehouse/list'
        })
        .then(({ data }) => {
          let all = data
          if (all.length < 1){
            that.status_loading = false
            that.$message.warning('暂无库区请添加')
          } else {
            for (let i = 0;i < all.length;i++){
              that.warehouse.push({
                id:all[i].warehouseid,
                name:all[i].warehousename
              })
            }
            if (that.warehouse.length === 1){
              that.increaseForm.warehousename = that.warehouse[0].name
              that.increaseForm.warehouseid = that.warehouse[0].id
            }
            that.activeName = that.warehouse[0].id
            that.getPartition(this.$store.state.basicInfo.warehouseInfo.id)
            that.status_loading = false
          }
        })
    },
    getUser(){
      let that = this
      that
        .$axios({
          method:'get',
          url:'/user/list'
        })
        .then(({ data }) => {
          let all = data.list
          for (let i = 0;i < all.length;i++){
            that.user.push({
              id:all[i].id,
              name:all[i].username
            })
          }
        })
    },
    selectPartition(id){
      this.increaseForm.partitionid = id
      this.increaseForm.partitionname = this.partition.filter(function (item){
        return item.id === id
      })[0].name
      this.increaseForm.partitioncode = this.partition.filter(function (item){
        return item.id === id
      })[0].code
    },

    setType(id){
      this.increaseForm.type = id
      this.form.type = id
    },
    getSize(){
      if (
        this.increaseForm.height &&
        this.increaseForm.width &&
        this.increaseForm.extent
      ){
        this.size =
          Number(this.increaseForm.height) *
          Number(this.increaseForm.width) *
          Number(this.increaseForm.extent)
      }
      if (this.form.height && this.form.width && this.form.extent){
        this.size =
          Number(this.form.height) *
          Number(this.form.width) *
          Number(this.form.extent)
      }
    },
    //获取库区信息
    getPartition(id){
      let that = this
      if (id){
        that.listLoading = true
        that
          .$axios({
            method:'get',
            url:`/partition/list/${id}`
          })
          .then(({ data }) => {
            that.listLoading = false
            let all = data.list
            that.partition = []
            that.increaseForm.partitionname = ''
            that.increaseForm.partitioncode = null
            for (let i = 0;i < all.length;i++){
              that.partition.push({
                id:all[i].partitionid,
                name:all[i].partitionname,
                code:all[i].partitioncode
              })
            }
            that.partitionid = that.partition[0].id
            that.radio = that.partition[0].id
            that.init()
          })
      } else {
        that.listLoading = false
      }
    },
    radioClick(id){
      let that = this
      that.partitionid = id
      that.page=1
      that.init()
    },
    editState(){
      if (!this.tableRowSelected.length)
        return this.callbackMessage(
          this.$t('m.choose') + this.$t('m.page.location')
        )
      this.dialogFormVisible2 = true
    },
    handleState(){
      let ids = []
      for (let i = 0;i < this.tableRowSelected.length;i++){
        ids.push(this.tableRowSelected[i].locationid)
      }
      let state = this.stateValue
      let options = {
        method:'put',
        url:`/locationinfo/state`,
        data:{ ids, state }
      }
      this.$axios(options).then(() => {
        this.callbackMessage(this.$t('m.state') + this.$t('m.editSuccess'))
        this.init()
        this.stateValue = ''
        this.dialogFormVisible2 = false
      })
    },
    closeDialog(){
      this.$refs['ruleFormEdit'].resetFields()
    },
    closeAddDialog(){
      this.$refs['ruleFormAdd'].resetFields()
    },
    export2Excel(){
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')

        const tHeader = [
          '库位编码',
          '状态',
          '长度',
          '宽度',
          '高度',
          '最大库存量',
          '所在库区',
          '所在仓库'
        ]

        const filterVal = [
          'locationcode',
          'state',
          'extent',
          'width',
          'height',
          'maxinventory',
          'partitionname',
          'warehousename'
        ]

        const list = this.tableData

        const data = this.formatJson(filterVal, list)

        if (list.length > 0){
          export_json_to_excel(
            tHeader,
            data,
            '报表' + common.timestampToTime(new Date())
          )
        } else {
          this.$message({
            showClose:true,
            message:'请选择库区',
            type:'warning',
            duration:1000
          })
        }
      })
    },

    formatJson(filterVal, jsonData){
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    print(){
      if (this.tableRowSelected.length < 1){
        this.$message(this.$t('m.chooseprint') + this.$t('m.page.location'))
      } else {
        let LODOP = getLodop()
        let arr = []
        this.tableRowSelected.forEach(v => {
          arr.push(v.locationcode)
        })
        this
          .$axios({
            method:'post',
            url:'/printtemplate/printlocationcode',
            data:arr
          })
          .then(({ data }) => {
            let printContent = data
            // this.printContent +=
            //   'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
            eval(printContent)
            LODOP.SET_PRINT_PAGESIZE(1, '65mm', '35mm', '')
            LODOP.PREVIEW()
          })
      }
    }
  },
  activated(){
    this.getWarehouse()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.dialogFormVisible1=false
    this.dialogFormVisible2=false
    next()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
.el-collapse-item__header {
  font-size: 14px !important;
  padding-left: 20px;
}
.el-radio.block {
  display: block;
  text-align: left;
  margin-left: 30px;
  margin-bottom: 10px;
}
.el-collapse {
  height: 100%;
  overflow-y: scroll;
}
.el-collapse-item__content {
  text-align: left;
}
.el-radio-group {
  width: 100%;
}
::v-deep.upper .el-input__inner {
  text-transform: uppercase !important;
}
</style>
